<template>
  <div class="box">
    <header class="header">头部</header>
    <div class="content">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>1</van-swipe-item>
        <van-swipe-item>2</van-swipe-item>
        <van-swipe-item>3</van-swipe-item>
        <van-swipe-item>4</van-swipe-item>
      </van-swipe>
      <van-grid column-num="5" :border="false" icon-size="40">
        <van-grid-item
          icon="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png"
          text="超市"
        />
        <van-grid-item
          icon="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/135931/4/3281/5598/5efbf2c0Edbdc82c7/ed9861b4ddfb9f30.png"
          text="数码电器"
        />
        <van-grid-item
          icon="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/140012/8/1804/3641/5efbf318E38bd5dad/0db99d859ab16ce9.png"
          text="京东服饰"
        />
        <van-grid-item
          icon="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/129215/21/5978/3618/5efbf344Ebec23ae8/59712d986b10bb0a.png"
          text="京东生鲜"
        />
        <van-grid-item
          icon="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/116602/7/11200/3796/5efbf375Ebba41029/f07cc166f368fa05.png"
          text="京东到家"
        />
        <van-grid-item
          icon="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/146390/3/1846/4909/5efbf39aEe5f5f797/300071558a9ab078.png"
          text="充值缴费"
        />
        <van-grid-item
          icon="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/179511/33/4023/3422/609e0d45Ea495a996/3783165b48cf1e08.png"
          text="9.9元拼"
        />
        <van-grid-item
          icon="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/113589/24/11332/4897/5efbf3feE705d87db/e5c12d5e943266b9.png"
          text="领券"
        />
        <van-grid-item
          icon="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/131663/33/3380/3674/5efbf50fEf79cf314/af4b57d2383e605d.png"
          text="领金贴"
        />
        <van-grid-item
          icon="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/123730/37/5924/4189/5efbf567E0a226121/d04df7c74c87cf68.png"
          text="PLUS会员"
        />
      </van-grid>
      <div class="ms">
        <van-image src="https://img2.baidu.com/it/u=4177085944,3999998087&fm=26&fmt=auto&gp=0.jpg" />
        <van-image src="https://img0.baidu.com/it/u=258823279,3212212577&fm=26&fmt=auto&gp=0.jpg" />
      </div>
      <!-- <van-grid :border="false" :column-num="2">
        <van-grid-item>
          <van-image src="https://img2.baidu.com/it/u=4177085944,3999998087&fm=26&fmt=auto&gp=0.jpg" />
        </van-grid-item>
        <van-grid-item>
          <van-image src="https://img0.baidu.com/it/u=258823279,3212212577&fm=26&fmt=auto&gp=0.jpg" />
        </van-grid-item>
      </van-grid>-->
      <van-image
        height="80"
        src="https://img2.baidu.com/it/u=354110150,1071542538&fm=26&fmt=auto&gp=0.jpg"
      />
      <van-grid :border="false" :column-num="4">
        <van-grid-item>
          <strong class="gr-title">家装盛典</strong>
          <p>爱扮家</p>
          <van-image
            src="https://m.360buyimg.com/mobilecms/s150x150_jfs/t1/190204/40/11259/192841/60dea781E54b76861/46fc40edfdb3d858.jpg!q70.jpg"
          />
        </van-grid-item>
        <van-grid-item>
          <strong class="gr-title">完美纪念</strong>
          <p>专属礼物</p>
          <van-image
            src="https://m.360buyimg.com/mobilecms/s150x150_jfs/t14251/176/2258904398/450102/523e9427/5a90d11fNf560bd5d.jpg!q70.jpg"
          />
        </van-grid-item>
        <van-grid-item>
          <strong class="gr-title">品质女装</strong>
          <p>欧美原创</p>
          <van-image
            src="https://m.360buyimg.com/mobilecms/s150x150_jfs/t1/133292/21/12884/35002/5f8d5de2E930b2ef3/e217fcd319e7afea.jpg!q70.jpg"
          />
        </van-grid-item>
        <van-grid-item>
          <strong class="gr-title">程序猿</strong>
          <p>装备必须牛</p>
          <van-image
            src="https://m.360buyimg.com/mobilecms/s150x150_jfs/t1/133292/21/12884/35002/5f8d5de2E930b2ef3/e217fcd319e7afea.jpg!q70.jpg"
          />
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Swipe, SwipeItem, Grid, GridItem, Image as VanImage } from "vant";

Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(VanImage);
export default {
  name: "home",

  data() {
    return {};
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.ms {
  padding: 8px 8px;
  display: flex;
  .van-image {
    flex: 1;
  }
}
.gr-title {
  font-weight: 700;
  font-size: 18px;
  line-height: 20px;
  display: inline-block;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.van-grid {
  .van-grid-item {
    .van-grid-item__content {
      p {
        text-align: left;
        font-size: 12px;
        line-height: 14px;
        color: #666771;
      }
    }
  }
}
</style>